<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      输入城市/景点/游玩主体
    </div>
    <div class="header-right">
      城市
      <span class="iconfont arrow-icon">&#xe64a;</span>
    </div>
  </div>
</template>
<script>

  export default{
    name:'HomeHeader',
  }

</script>
<style scoped  lang="scss">
  @import '~style/varibles.scss';
  $color:#fff;
.header{
  display:flex;
  line-height:(86rem/100);
  background:$bgColor;
  color:$color;
  .header-left{
    width:(64rem/100);
    float:left;
    .back-icon{
      text-align: center;
      font-size:.4rem;
    }
  }
  .header-input{
    flex:1;
    height:(64rem/100);
    line-height:.64rem;
    margin:(12rem/100) (20rem/100);
    padding-left:.2rem;
    border-radius: .1rem;
    background: #fff;
    color:#ccc;
  }
  .header-right{
    width:(124rem/100);
    float:right;
    text-align: center;
    .arrow-icon{
      margin-left:-.04rem;
      fong-size:.24rem;
    }
  }
}
</style>
